<div style="min-width:1250px;">
<nz-breadcrumb class="breadcrumb-pos">
  <i nz-icon type="link" theme="outline" style="color:#1890FF;padding-right:4px"></i>
  <nz-breadcrumb-item>
    设备抄表账单
  </nz-breadcrumb-item>
</nz-breadcrumb>
<div nz-row [nzGutter]="8" style="border-bottom: 1px solid #ccc;margin-bottom: 8px;min-width: 800px;">
  <div nz-col [nzSpan]="4">
    <nz-form-item nzFlex>
      <nz-form-label>设备名称</nz-form-label>
      <nz-form-control>
        <input nz-input [(ngModel)]="name">
      </nz-form-control>
    </nz-form-item>
  </div>
  <div nz-col [nzSpan]="4">
    <nz-form-item nzFlex>
      <nz-form-label>租赁客户</nz-form-label>
      <nz-form-control>
        <input nz-input [(ngModel)]="companyName">
      </nz-form-control>
    </nz-form-item>
  </div>
  <div nz-col [nzSpan]="4">
    <nz-form-item nzFlex>
      <nz-form-label>结算周期</nz-form-label>
        <nz-select [(ngModel)]="payType" style="margin-top:3px;width: 90px;">
          <nz-option [nzLabel]="'全部'" [nzValue]="''"></nz-option>
          <nz-option nzLabel="年结算" nzValue="0"></nz-option>  
          <nz-option nzLabel="半年结算" nzValue="1"></nz-option>  
          <nz-option nzLabel="季结算" nzValue="2"></nz-option>  
          <nz-option nzLabel="月结算" nzValue="3"></nz-option>  
        </nz-select>
    </nz-form-item>
  </div>
  <div nz-col [nzSpan]="4">
    <nz-form-item nzFlex>
      <nz-form-label>是否被统计</nz-form-label>
      <nz-select [(ngModel)]="isStatistics" style="margin-top:3px;">
        <nz-option [nzLabel]="'全部'" [nzValue]="''"></nz-option>
        <nz-option [nzLabel]="'未统计'" [nzValue]="'0'"></nz-option>
        <nz-option [nzLabel]="'已统计'" [nzValue]="'1'"></nz-option>
      </nz-select>
      <button nz-button [nzType]="'primary'" [nzLoading]="btn_loading" style="margin:3px 0 0 20px;" (click)="getBilllist()">查询</button>
    </nz-form-item>
  </div>
</div>

<div class="add_btn">
  <button nz-button style="float:right" (click)="exportOut()">导出Excel</button>
</div>
<nz-table #basicTable [nzData]="billlist" [nzLoading]="loading" [nzShowPagination]="false" [nzBordered]="true">
  <thead>
    <tr>
      <th>账单编号<hr>设备名称</th>
      <th>租赁客户<hr>抄表时间</th>
      <th>套餐金额 / 打印金额<hr>总金额</th>
      <th>价格<hr>黑白 / 彩色</th>
      <th>套餐量<hr>黑白 / 彩色</th>
      <th>黑白<hr>起始量 / 结束量 / 打印量</th>
      <th>彩色<hr>起始量 / 结束量 / 打印量</th>
      <th>开始日期<hr>结束日期</th>
      <th>结算周期<hr>结算次数</th>
      <th nzWidth="60px">操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of billlist">
      <td>{{data.number}}<hr>{{data.printerName}}</td>
      <td>{{userinfo[data.userId].companyName}}<hr>{{data.dateAdd.slice(0,10)}}</td>
      <td>{{data.setMealMoney}} / {{data.printMoney}}<hr>{{data.sumMoney}}</td>
      <td>{{data.blackUnit}} / {{data.coloursUnit}}</td>
      <td>{{data.blackPresented}} / {{data.coloursPresented}}</td>
      <td>{{data.blackClearingInit}} / {{data.blackClearingEnd}} / {{data.blackYield}}</td>
      <td>{{data.coloursClearingInit}} / {{data.coloursClearingEnd}} / {{data.coloursYield}}</td>
      <td>{{data.clearingBegin?data.clearingBegin.slice(0,10):'--'}} <hr> {{data.clearingEnd?data.clearingEnd.slice(0,10):'--'}}</td>
      <td>{{data.clearingTypeStr}}<hr>{{data.clearingSum}}</td>
      <td>
        <a style="color:rgb(25, 190, 182);" routerLink="/main/printerbillinfo/{{data.id}}">详情</a>
      </td>
    </tr>
  </tbody>
</nz-table>
<nz-pagination style="float:right;margin-top:12px" [nzPageIndex]="PageIndex" [nzPageSize]="PageSize" [nzTotal]="PageTotal" (nzPageIndexChange)="PageIndexChange($event)" [nzHideOnSinglePage]="true" [nzShowTotal]="totalTemplate"></nz-pagination>
<ng-template #totalTemplate let-total>
  共 {{total}} 条数据
</ng-template>
</div>